<template>
  <div>
    <h3>商品数据</h3>
    {{ $store.state.goods.goodsList }} - {{ goodsList }}
    <p>totalNum: {{totalNum}}</p>
    <p><button @click="addG">添加商品</button></p>
    <p><button @click="addM">找厨师添加商品</button></p>
    <p><button @click="addGoods({gname:'华为手机',price:800})">mapActions-addGoods</button></p>
    <hr>
    <h3>购物车数据</h3>
    {{ $store.state.car.carList }} - {{ carList }}
    <p>totalPrice: {{totalPrice}}</p>
  </div>
</template>

<script>
import { mapState, mapGetters, mapActions } from 'vuex'
export default {
  name: 'App',
  computed: {
    // 方式一：
    // 将goods切片中的 goodsList state状态，映射为计算属性 goodsList
    // ...mapState('goods',['goodsList']),
    // 方式二：对象
    // ...mapState('goods', {
    //     goodsList:'goodsList'
    // })
    // ...mapGetters('goods',['totalNum']),
    // ...mapState('car',['carList']),
    // ...mapGetters('car', ['totalPrice'])

    // 方式三：只用一个mapState处理多个模块的 state属性映射
    ...mapState({
      goodsList: (state) => state.goods.goodsList,
      carList: (state) => state.car.carList,
    }),
    ...mapGetters({
      totalNum: 'goods/totalNum',
      totalPrice: 'car/totalPrice',
    }),
  },
  methods: {
    // 方式一：
    // ...mapActions('goods',['addGoods']),
    // 方式二：
    // ...mapActions('goods',{addGoods:'addGoods'}),
    // 方式三：
    ...mapActions({
      addGoods: 'goods/addGoods',
      addCar:'car/addCar'
    }),
    addG() {
      this.$store.dispatch('goods/addGoods', {
        gname: '小米手机',
        price: 1999,
      })
    },
    addM() {
      this.$store.commit('goods/ADD_GOODS', {
        id: Math.random().toString(36).slice(2),
        gname: 'vivo',
        price: 2999,
      })
    },
  },
}
</script>

<style>
</style>